<template>
  <div class="computerone">
    <div class="computerBox">
      <div>
        <p><span>14</span>
          <small>个</small>
        </p>
        <p>
          <span style="color: #EF730E;">2</span>
        </p>
      </div>
      <div class="down">
        <p>接入机房</p>
        <p>告警机房</p>
      </div>
    </div>
    <div class="computerBox">
      <div>
        <p id="container5"></p>
        <p>
          <span></span>
          <small></small>
        </p>
      </div>
      <div class="down">
        <p>未告警机房完好率</p>
        <p></p>
      </div>
    </div>

  </div>
</template>

<script>
  import echarts from "echarts";
  import reslist from "../../json/position.js";
  import chartmixins from "../../chartmixins.js";
    export default {
        name: "computer-one",
      mixins: [chartmixins],
      mounted() {
        this.equipment()
      },
      methods: {
        equipment() {
          var dom = document.getElementById("container5");
          var myChart = echarts.init(dom, "dark");
          var app = {};
          var rad = 85
          let option = null;
          option = {
            backgroundColor: "#0000",
            color: ["#00c800", "#00082F"],
            title: {
              text: rad+'%',
              x: 'center',
              y: 'center',
              itemGap: 20,
              textStyle: {
                color: '#ffffff',
                fontFamily: '微软雅黑',
                fontSize: 18,
                // fontWeight : 'bolder'
              }
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{d}%"
            },
            series: [
              {
                name: "占比",
                type: "pie",
                radius: ["65%", "80%"],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: "center"
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: "15",
                      fontWeight: "bold"
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                itemStyle:{
                  borderColor:'#053a76',
                  borderWidth:1,
                },
                data: [
                  {value: rad, name: ""},
                  {value: 100 - rad, name: ""}
                ]
              }
            ]
          };

          myChart.setOption(option, true);

          this.myChart = myChart;

          window.addEventListener("resize", () => {
            this.myChart.resize();
          });
        },

      }
    }
</script>

<style lang='scss' scoped>
  .computerone {
    width: 100%;
    height: 100%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
  .computerBox{
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  div{
    height: 100%;
    flex:2;
    display: flex;
    flex-direction: row;
  p{
    margin:0;
    height: 100%;
    padding-left: 10px;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  span {
    font-size: 44px;
  }
  small {
    font-size: 15px;
    margin-left: 15px;
    padding-bottom: 10px;
  }
  }
  }
  .down{
    flex:1;
  p{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    margin-top:10px;
    font-size: 15px;
  }
  }


  }

  }
</style>
